<template>
    <div class="baiduMap-container">
        <el-dialog
            :title="$t('overview.mapPowerStation')"
            :visible="visibleGoogleMap"
            :close-on-click-modal="false"
            @opened="initMap"
            width="900px"
            @close="()=>{$store.commit('setVisibleGoogleMap',false)}">
            
            <div id="allmap" ref="allmap" :style="{width:mapData.width,height:mapData.height}"></div>

        </el-dialog>
    </div>
</template>

<script scoped>
export default {
    name:'Header',
    components:{
    },
    props:{
        // markers:{
        //     type:Array,
        //     default:()=>{
        //         return []
        //     }
        // },
        mapData:{
            type:Object,
            default:()=>{
                return {
                    width:'100%',
                    height:'400px',
                    zoom:10,
                    center:{
                        lng:113,
                        lat:29
                    },
                    mapObj:{},//地图对象
                    markers:[],//地图上所有的标记
                    showType:'marker'
                }
            }
        }
    },
    data(){
        return {
            googleMarkers:[]
        }
    },
    watch:{

    },
    computed: {
        visibleGoogleMap(){
            return this.$store.state.sysStore.visibleGoogleMap
        }
    },
    mounted(){
    },
    methods:{
        initMap(){
            // console.log(this.mapData.mapObj,'map')
            this.mapData.mapObj = new google.maps.Map(document.getElementById("allmap"), {
                zoom: this.mapData.zoom,
                center: this.mapData.center
            });
            // console.log(this.mapData.markers,'--------------------markers')
            for(var i=0;i<this.mapData.markers.length;i++){
                let point=this.mapData.markers[i]
                // console.log(point,i)
                if(point.lat!=null&&point.lng!=null){
                    this.addMarker(point);
                }
            }
        },
        addMarker(location) {
            let label='',content='';
            if(this.mapData.showType=='site'){
                if(location.label!=''&&location.label!=null){
                    // label=location.label
                    content='<div>'+location.label+'</div>'
                }
            }else if(this.mapData.showType=='count'){
                if(location.count!=''&&location.count!=null){
                    label=location.count.toString()
                    content='<div>'+location.name+'</div>'
                }
            }
            const infowindow = new google.maps.InfoWindow({
                content: content,
            });
            
            const marker = new google.maps.Marker({
                position: location,
                map: this.mapData.mapObj,
                label:label
            });
            // this.googleMarkers.push(marker);
            if(content!=''){
                marker.addListener("mouseover", () => {
                    infowindow.open(this.mapData.mapObj, marker);
                });
                marker.addListener("mouseout", () => {
                    infowindow.close(this.mapData.mapObj, marker);
                });
            }
        }
    }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.baiduMap-container{
   .el-dialog__wrapper .el-dialog .el-dialog__body{
       padding: 0;
   }
   .map-control{

   }
   .search_wrap{
       .el-input-group {
            position: absolute;
            top: 80px;
            width: 400px;
            left: 50%;
            margin-left: -200px;
            /* opacity: 0.5; */
            background: rgba(255,255,255,.8);
            height: 40px;
            .el-input__inner{
                background: transparent;
                height: 40px;
                border-radius: 0;
            }
        }
   }
   .res_address{
        position: absolute;
        top:450px;
        left:300px;
        margin-left: -150px;
        padding: 10px;
        width: 530px;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #ccc;
        line-height: 30px;
   }
}
</style>